<template>
  <div class="app-container info-edit">
    <el-row style="padding-top: 10px">
      <el-col :span="1">
        <i class="el-icon-s-custom"></i>
      </el-col>
      <el-col :span="10">
        <span class="bold" v-show="reportEvent.address">地址:{{ reportEvent.address }}     </span>
        <br/>
        <span style="padding-top: 5px" class="bold"
              v-show="reportEvent.reportType">扬尘类型:{{ reportEvent.reportType | opinionsFilter(dustOptions) }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="padding-top: 30px">
      <el-col :span="12">
        <span class="bold">现场资料</span>
        <div v-for="(item,index) in reportEvent.reportAttachments" :key="index">
          <el-image
              v-show="item.attachmentType==='png'||item.attachmentType==='jpg'||item.attachmentType==='bmp'"
              style="float: left;width: 150px;margin: 20px" :src="uploadUrl+item.fileName"
              :preview-src-list="srcList"></el-image>
          <video :src="uploadUrl+item.fileName" style="float: left;height: 330px"
                 v-show="item.attachmentType === 'mp4'||item.attachmentType === 'avi'||item.attachmentType === 'rmvb'"
                 controls="controls"
                 width="30%">
          </video>
        </div>
      </el-col>
      <el-col :span="12">
        <span class="bold">现场文字描述</span>
        <el-input type="textarea" style="padding-top: 10px" rows="3" v-model="reportEvent.remark"
                  :disabled="true"></el-input>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="padding-top: 30px">
      <el-col :span="12">
        <span class="bold">审批意见</span>
        <el-select v-model="reportEvent.approvalOpinions"
                   @change="changeSub()"
                   :disabled="reportEvent.approvalOpinionDisable||flag"
                   style="margin-left: 40px" placeholder="请选择">
          <el-option
              v-for="dict in approvalOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue">
          </el-option>
        </el-select>
        <el-button type="primary" size="small" round style="margin-left: 40px"
                   :disabled="reportEvent.approvalOpinionDisable||flag" @click="updateDustReport1">审批
        </el-button>
      </el-col>

    </el-row>
    <el-row :gutter="24" style="padding-top: 30px">
      <el-col :span="6">
        <span class="bold">反馈资料上传</span>
        <Uploader style="margin-right: 40px" :show-list="feedbackAttachments" url="/api/common/file/localUpload"
                  remark="feedback" ref="uploader"/>
      </el-col>
      <el-col :span="6">
        <span class="bold">反馈意见</span>
        <el-input type="textarea" rows="3" v-model="reportEvent.feedback" style="padding-top: 10px"></el-input>
        <el-button type="primary" size="small" round style="margin-left: 40px;margin-top: 10px"
                   @click="updateDustReport2">提交
        </el-button>
      </el-col>
      <!--<el-col :span="12">
        <span class="bold">反馈资料展示</span>
        <div v-for="(item,index) in reportEvent.feedbackAttachments" :key="index">
          <el-image
              v-show="item.attachmentType==='png'||item.attachmentType==='jpg'||item.attachmentType==='bmp'"
              style="float: left;width: 150px;margin: 20px" :src="uploadUrl+item.fileName"
              :preview-src-list="srcList"></el-image>
          <video :src="uploadUrl+item.fileName" style="float: left;height: 330px"
                 v-show="item.attachmentType === 'mp4'||item.attachmentType === 'avi'||item.attachmentType === 'rmvb'"
                 controls="controls"
                 width="30%">
          </video>
        </div>
      </el-col>-->
    </el-row>
  </div>
</template>

<script>

import {findById, updateDustReport} from "@/api/weixin/dustReport"
import Uploader from "@/components/Uploader";

export default {
  name: "infoEdit",
  components: {
    Uploader
  },
  data() {
    return {
      id: undefined,
      srcList: [],
      desc: "",
      // 审批意见
      approvalOptions: [],
      // 上报分类
      dustOptions: [],
      uploadUrl: process.env.VUE_APP_BASE_API_PIC,
      value: '',
      // 在进页面的时候这里的数据已经被初始化
      reportEvent: {
        approvalOpinions: '',
        feedback: '',
        feedbackAttachments: []
      },
      // 控制审批按钮
      flag: false,
      // 控制提交按钮
      subFlag: false,
      feedbackAttachments: []

    }
  },
  created() {
    //sys_approval_opinions
    this.getDicts("sys_approval_opinions").then(response => {
      this.approvalOptions = response.data;
    });
    this.getDicts("sys_dust_type").then(response => {
      this.dustOptions = response.data;
    });
    this.id = this.$route.params.id
  },
  mounted() {
    this.findById();
  },
  methods: {
    findById() {
      // 控制审批按钮
      this.flag = false;
      // 控制提交按钮
      this.subFlag = false;

      findById(this.id).then(res => {
        let reportEvent = res.data
        this.reportEvent = reportEvent;
        debugger
        if (reportEvent.approvalOpinions != null) {
          this.reportEvent.approvalOpinionDisable = true;
        }

        if (reportEvent.reportAttachments != null && reportEvent.reportAttachments.length > 0) {
          reportEvent.reportAttachments.forEach(data => {
            if (data.attachmentType == 'png' || data.attachmentType == 'jpg' || data.attachmentType == 'bmp')
              this.srcList.push(this.uploadUrl + data.fileName)
          })
        }
        // 处理反馈用文件
        if (reportEvent.feedbackAttachments != null && reportEvent.feedbackAttachments.length > 0) {
          reportEvent.feedbackAttachments.forEach(attachment => {
            let file = {};
            file.url = process.env.VUE_APP_BASE_API_PIC + attachment.fileName
            file.attachmentType = attachment.attachmentType
            this.feedbackAttachments.push(file)
          })
        }
      }).catch(err => {

      })
    },
    // 审批
    updateDustReport1() {

      if (this.reportEvent.approvalOpinions === ''||this.reportEvent.approvalOpinions === null) {
        this.msgInfo("请选择审批意见")
        return
      }
      this.flag = true;
      this.subFlag = false;
      updateDustReport(this.reportEvent).then(res => {
        this.msgSuccess("审批成功")
      }).catch(err => {

      })
    },
    // 反馈意见
    updateDustReport2() {
      let data = this.reportEvent.approvalOpinions;
      if ('' === data || undefined === data || null === data || this.subFlag) {
        this.msgInfo("请先选择审批意见")
        return
      }
      //  将状态设置为1
      this.reportEvent.reportStatus = '1';
      // 获取文件上传的列表
      let fileList = this.$refs.uploader.fileList;
      this.reportEvent.feedbackAttachments = fileList;

      updateDustReport(this.reportEvent).then(res => {
        this.msgSuccess("提交反馈意见成功")
      }).catch(err => {

      })
    },
    back() {
      this.$router.go(-1);
    },
    changeSub() {
      this.subFlag = true
    }
  }
}
</script>

<style scoped lang="scss">
.bold {
  font-size: 16px;
  font-weight: 700 !important
}

</style>
<style lang="scss">
.info-edit {
  .el-textarea.is-disabled .el-textarea__inner {
    background-color: #F5F7FA;
    border-color: #dfe4ed;
    color: #303133;
    cursor: not-allowed;
  }

  .el-input.is-disabled .el-input__inner {
    background-color: #F5F7FA;
    border-color: #dfe4ed;
    color: #303133;
    cursor: not-allowed;
  }
}
</style>